<template>
  <div class="bar_box">
    <div class="bar" ref="chart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { sale: 2380, storeNum: 2000, name: "其他" },
        { sale: 1777, storeNum: 4500, name: "专营店" },
        { sale: 1800, storeNum: 4030, name: "旗舰店" },
        { sale: 2551, storeNum: 4070, name: "专卖店" },
      ],
      xValue: [],
      ySaleValue: [],
    };
  },
  methods: {
    initValue() {
      this.dataList.forEach((item) => {
        this.xValue.push(item.name);
        this.ySaleValue.push(item.sale);
      });
    },
    initEchar() {
      let _this = this; //缓存vue实例
      let chartEl = this.$refs.chart; //获取容器
      let myChart = this.$echarts.init(chartEl); //初始化图标
      // echarts图标配置
      const option = {
        // 标题
        title: {
          text: "店铺分布类型对比",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          textStyle: {
            align: "left",
          },
          // 颜色字体设置
          backgroundColor: "#fff",
          textStyle: {
            fontSize: 14,
          },
          // 其他样式设置
          extraCssText:
            "width:160px;padding:3px 14px;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);border:1px solid rgba(228, 69, 59, 0.4);color:#707985;text-align:left;",
        },
        legend: {
          data: ["销售额", "店铺数量"],
          itemGap: 40,
          itemWidth: 40,
          itemHeight: 20,
          textStyle: {
            fontSize: 14,
            color: "#4E5867",
          },
        },
        xAxis: [
          {
            type: "category",
            data: _this.xValue,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "销售额",
            axisLabel: {
              formatter: "{value}亿",
            },
          }
        ],
        series: [
          {
            name: "销售额",
            type: "bar",
            data: _this.ySaleValue,
            barWidth: 28,
            itemStyle: {
              barBorderRadius: [2, 2, 0, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#EF6D65", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#CE473E", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.initValue();
    this.$nextTick(() => {
      this.initEchar();
    });
  },
};
</script>

<style scoped>
.bar {
  margin: 0 auto;
  width: 100%;
  height: 500px;
}
</style>